.toolbar {
	position: absolute;
	left: 10px;

	width: 100%;
	margin: 0 -10px;
	padding: 0 calc(var(--sidebar-default-padding) + 10px);

	&__wrapper {

		display: flex;

		margin: 0 -0.25rem;

		color: var(--toolbar-placeholder-color);
	}

	&__search {
		position: relative;

		display: flex;

		width: 100%;
		align-items: center;
	}

	&__search-input {
		width: 100%;
		padding-left: 32px;

		&:focus + svg {
			display: block;
		}
	}

	&__search-buttons {
		margin-left: 8px;
	}

	&__icon {
		&--plus {
			position: absolute;
			top: 50%;
			left: 50%;

			transform: translate(-50%, -50%);

			font-size: 1.25rem;
		}
	}

	& .rc-input {
		margin: 0 0.25rem;

		&__wrapper {
			padding: 0;

			color: var(--rc-color-primary-light);
		}

		&__element {
			color: var(--color-white);
			border-color: var(--rc-color-primary-dark);
			background-color: var(--rc-color-primary-darkest);

			&::placeholder {
				color: var(--rc-color-primary-light);
			}

			&:focus + .rc-input__icon--right {
				display: flex;
			}
		}

		&__icon {
			left: 0.5rem;
			fill: var(--rc-color-primary-light);

			&--right {
				right: 0.5rem;
				left: auto;

				display: none;
			}

			& + .rc-input__element {
				padding: 0.5rem 1.5rem 0.5rem 2.25rem;
			}

			&-svg--plus {
				transform: rotate(45deg);

				font-size: 1rem;
			}
		}
	}

	& .rc-button {

		min-height: 36px;
		margin: 0 0.25rem;

		color: var(--rc-color-primary-light);
		border-color: var(--rc-color-primary-dark);
		background-color: var(--rc-color-primary-darkest);
	}

	& .rc-input__icon-svg--magnifier {
		font-size: 1rem;
	}
}

@media (width <= 400px) {
	.toolbar {
		padding: 0 var(--sidebar-extra-small-default-padding) var(--sidebar-small-default-padding);
	}
}

.rtl .toolbar {
	& .rc-input__icon + .rc-input__element {
		padding: 0.5rem 2.25rem 0.5rem 1rem;
	}
}
